import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";
import { CSSProperties } from "react";

// 定义组件的属性接口（如果有的话）
interface PieChartProps {
  // 这里可以定义一些可选或必选的属性
}

const PieChart: React.FC<PieChartProps> = () => {
  // 使用 useRef 来引用 DOM 元素
  const chartRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (chartRef.current) {
      // 初始化 ECharts 图表
      const myChart = echarts.init(chartRef.current);

      // 绘制图表
      myChart.setOption({
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "销量",
            type: "pie",
            radius: "50%",
            data: [
              { value: 5, name: "衬衫" },
              { value: 20, name: "羊毛衫" },
              { value: 36, name: "雪纺衫" },
              { value: 10, name: "裤子" },
              { value: 10, name: "高跟鞋" },
              { value: 20, name: "袜子" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });

      // 清理图表实例，避免内存泄漏
      return () => {
        myChart.dispose();
      };
    }
  }, []);

  // 定义样式对象的类型
  const chartStyle: CSSProperties = {
    width: 400,
    height: 400,
  };

  return <div ref={chartRef} style={chartStyle}></div>;
};

export default PieChart;
